<!DOCTYPE html>
<html ng-app="AMapApp">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1">
		<title>基于高德地图的单页应用实战</title>
		<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
		<script src="http://webapi.amap.com/maps?v=1.3&key=d4d0ed7213ec56f994162cdd228ec4b5"></script>
		<!--<script src="http://webapi.amap.com/maps?v=1.3&key=1bb944eae2cd1b2551f1a4ef071b8575"></script>-->
		<script src="./node_modules/jquery/dist/jquery.js"></script>
		<script src="./node_modules/angular/angular.js"></script>
<!--		<script src="./node_modules/angular/angular-route.js"></script>-->
		<script src="./node_modules/angular/angular-animate.js"></script>
		<script type="text/javascript" src="./js/index.js"></script>
		<script src="./js/MapBase.js"></script>
		<script src="./js/SearchMap.js"></script>
		<link rel="stylesheet" type="text/css" href="./css/index.css">
	</head>
	<body>
		<div pages>
			<div page id="main">
				<div ng-controller="MapController">
					<div id="mapCon" ng-init="mapInit();">
					</div>
					<div id="queryDiv">
						<span class="glyphicon glyphicon-search"></span>
						<span ng-click="$emit('pageChange','search');">查找地点</span>
					</div>
					<div id="funcDiv">
						<table>
							<tbody>
								<tr>
									<td ng-click="$emit('pageChange','searchAround');">
										<span class="glyphicon glyphicon-screenshot" ></span>
										&nbsp;周边搜索
									</td>
									<td ng-click="$emit('pageChange','plan');">
										<span class="glyphicon glyphicon-screenshot" ></span>
										&nbsp;路线规划
									</td>
									<td ng-click="$emit('pageChange','more');">
										<span class="glyphicon glyphicon-menu-hamburger"></span>
										&nbsp;更多
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div id="locateDiv" ng-click="locate();">
						<span class="glyphicon glyphicon-screenshot" ng-show="!data.isLocating"></span>
						<img ng-show="data.isLocating" 	src='./images/loading.gif';></img>
					</div>
					<div id="zoomInDiv" ng-disabled="!data.isZoomInEnable" ng-click="zoomIn();">
						<span class="glyphicon glyphicon-zoom-in"></span>
					</div>
					<div id="zoomOutDiv" ng-disabled="!data.isZoomOutEnable" ng-click="zoomOut();">
						<span class="glyphicon glyphicon-zoom-out"></span>
					</div>
					<div id="clearDiv" ng-click="clear();">
						<span class="glyphicon glyphicon-remove"></span>
					</div>
				</div>
			</div>
			<div page id="search">
				<div ng-controller="SearchController">
					<header>
						<p>
							<input type="search" placeholder="搜索" ng-model="data.keyword" ng-keyup="change(data.keyword)"></input>
							<a type="button" class="btn btn-primary btn-sm" ng-href="" ng-click="change(data.keyword)">搜索</a>
						</p>
						<span class="glyphicon glyphicon-menu-left backButton" ng-click="$emit('pageChange','main');"></span>
					</header>
					<content>
						<div class="list-group" ng-show="!data.isError">
							<a ng-repeat="poi in data.pois" class="list-group-item" style="margin: 0.5rem;border-radius: 0;box-shadow: inset -1px -1px 1px #bbb;" ng-click="locate(poi);">
								<h4 class="list-group-item-heading">{{poi.name}}
									<span class="glyphicon glyphicon-globe pull-right"></span>
								</h4>
								<p class="list-group-item-text">{{poi.address}}</p>
							</a>
						</div>
						<p ng-show="data.isError" class="alert alert-danger" style="margin: 0.5rem;border-radius: 0;box-shadow: inset -1px -1px 1px #bbb;">{{data.message}}</p>
					</content>
				</div>
			</div>
			<div page id="searchAround">
				<div ng-controller="SearchAroundController">
					<header>
						<p class="pageTitle">
							周边搜索
						</p>
						<span class="glyphicon glyphicon-menu-left backButton" ng-click="$emit('pageChange','main');"></span>
					</header>
					<content>
						<div class="row">
							<div class="col-md-3" ng-click="searchAround('餐饮');">
								<span class="glyphicon glyphicon-cutlery"></span>
								餐饮
							</div>
							<div class="col-md-3" ng-click="searchAround('酒店');">
								<span class="glyphicon glyphicon-bed "></span>
								酒店
							</div>
							<div class="col-md-3" ng-click="searchAround('邮局');">
								<span class="glyphicon glyphicon-blackboard "></span>
								邮局
							</div>
							<div class="col-md-3" ng-click="searchAround('银行');">
								<span class="glyphicon glyphicon-piggy-bank "></span>
								银行
							</div>
						</div>
						<div class="row">
							<div class="col-md-3" ng-click="searchAround('景点');">
								<span class="glyphicon glyphicon-cutlery"></span>
								景点
							</div>
							<div class="col-md-3" ng-click="searchAround('洗浴');">
								<span class="glyphicon glyphicon-bed "></span>
								洗浴
							</div>
							<div class="col-md-3" ng-click="searchAround('公交');">
								<span class="glyphicon glyphicon-blackboard "></span>
								公交
							</div>
							<div class="col-md-3" ng-click="searchAround('购物');">
								<span class="glyphicon glyphicon-piggy-bank "></span>
								购物
							</div>
						</div>
						<div class="list-group" ng-show="true">
							<a ng-repeat="poi in data.pois" class="list-group-item" style="margin: 0.5rem;border-radius: 0;box-shadow: inset -1px -1px 1px #bbb;" ng-click="locate(poi);">
								<h4 class="list-group-item-heading">{{poi.name}}
									<span class="glyphicon glyphicon-globe pull-right"></span>
								</h4>
								<p class="list-group-item-text">{{poi.address}}</p>
							</a>
						</div>
					</content>
				</div>
			</div>
			<div page id="plan">
				<div ng-controller="PlanController">
					<header>
						<p class="pageTitle">
							<div class="btn-group btn-group-justified" style="position: absolute;display: inline-block;vertical-align: middle;top: 0.1rem;left: 50%;width: 54%;margin-left: -27%;">
							    <a class="btn btn-default" ng-class="{active:data.type == 0}" ng-href="" ng-click="data.type = 0;" ng-disabled="true">
							    	<span class="glyphicon glyphicon-tree-conifer"></span>公交
							    </a>
							    <a class="btn btn-default" ng-class="{active:data.type == 1}" ng-href="" ng-click="data.type = 1;" ng-disabled="true">
							    	<span class="glyphicon glyphicon-road"></span>
							    	驾车
							    </a>
							    <a class="btn btn-default" ng-class="{active:data.type == 2}" ng-href="" ng-click="data.type = 2;">
							    	<span class="glyphicon glyphicon-sunglasses"></span>步行
							    </a>
							</div>
						</p>
						<span class="glyphicon glyphicon-menu-left backButton" ng-click="$emit('pageChange','main');"></span>
						<a type="button" class="btn btn-primary btn-sm" ng-href="" ng-click="search()" style="position: absolute;
  right: 0.2rem;top: 0.2rem;" ng-disabled="searchForm.$invalid">搜索</a>
					</header>
					<content>
						<form name="searchForm" class="form-horizontal" style="padding:2rem;">
							<div class="form-group">
								<label class="control-label col-sm-1">起点:</label>
								<div class="col-sm-11">
									<input name="start" type="text" ng-model="data.start.name" class="form-control" placehoder="请输入起点" ng-keyup="change(data.start.name,'starts')" required>
									<div class="list-group" ng-show="data.starts.length>0" style="position:absolute;top:3rem;width:100%;height:5rem;z-index:1;padding-right:2.4rem;">
										<a ng-repeat="poi in data.starts" class="list-group-item" ng-click="select(poi,'starts');">
											<h4 class="list-group-item-heading">{{poi.name}}
											</h4>
											<p class="list-group-item-text">{{poi.address}}</p>
										</a>
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-sm-1">终点:</label>
								<div class="col-sm-11">
									<input name="end" type="text" ng-model="data.end.name" class="form-control" placehoder="请输入终点" ng-keyup="change(data.end.name,'ends')" required>
									<div class="list-group" ng-show="data.ends.length>0" style="position: absolute;top:3rem;width:100%;height:5rem;z-index:1;padding-right:2.4rem;">
										<a ng-repeat="poi in data.ends" class="list-group-item" ng-click="select(poi,'ends');">
											<h4 class="list-group-item-heading">{{poi.name}}
											</h4>
											<p class="list-group-item-text">{{poi.address}}</p>
										</a>
									</div>
								</div>
							</div>
							<div class="list-group" ng-show="data.result.count>0" >
								<p class="alert alert-info">路径数：{{data.result.count}}
									<br/>
									距离：{{data.result.routes[0].distance}}米
									<br/>
									耗时：{{data.result.routes[0].time}}秒
								</p>
								<p>第一条路径：</p>
								<a class="list-group-item" ng-repeat="step in data.result.routes[0].steps"  ng-click="checkStep(step);">
									<h4 class="list-group-item-heading">{{step.instruction}}
									</h4>
									<p class="list-group-item-text">长：{{step.distance}}米 &nbsp;&nbsp; 耗时：{{step.time}} 秒
									</p>
								</a>
							</div>
						</form>
					</content>
				</div>
			</div>
			<div page id="more">
				<div ng-controller="MoreController">
					<header>
						<p class="pageTitle">
							更多
						</p>
						<span class="glyphicon glyphicon-menu-left backButton" ng-click="$emit('pageChange','main');"></span>
					</header>
					<content>
						<div class="list-group">
							<a class="list-group-item" style="margin: 0.5rem;border-radius: 0;box-shadow: inset -1px -1px 1px #bbb;" ng-click="getGeocode();">
								地理编码
							</a>
						</div>
					</content>
				</div>
			</div>
		</div>
	</body>
</html>